<template>
	<view class="page-body" v-if="loadPage" >
	  <movable-area class="movable-area" v-if="Object.keys(rewardList).length > 0">
	    <movable-view class="movable-view" :x="x" :y="y" direction="all">
	      <view class="float-box">
			  <img src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/x5j_file/2025-04-14/174462537067fcdeda6b3f7.gif" class="float-box-img" @click="open"/>
			  <!-- <image  :src="/static/images/fflq.gif" @error="imageError"></image> -->
		  </view>
	   </movable-view>
	</movable-area>
	<uni-popup ref="popup"  type="center" :safe-area="false"  mask-background-color="rgba(0,0,0,0.7)" @close="close" @maskClick="close">
			<view class="" :class="curr_reward.type==1 ? 'popup-discount-content popup-yhq-content': 'popup-discount-content' ">
				<view class="show-img-box">
					<img :src="curr_reward.popup_img" class="img" />
				</view>
				<view class="title">{{curr_reward.title}}</view>
				<view class="sub-title">{{curr_reward.sub_title}}</view>
				<view class="time" v-if="curr_reward.type==1 && curr_reward.end_time==long_time" style="margin-top: 30rpx;">有效期:"长期有效"</view>
				<view class="time" v-if="curr_reward.type==1 && curr_reward.end_time!=long_time" style="margin-top: 15rpx;">开始时间：{{curr_reward.start_time}}</view>
				<view class="time" v-if="curr_reward.type==1 && curr_reward.end_time!=long_time" >结束时间：{{curr_reward.end_time}}</view>
				<view class="btn" @click="getReward(curr_reward.index, curr_reward.reward_no)">领取</view>
			</view>
			<view class="close-box" @click="close"></view>
			<!-- <view class="popup-discount-content popup-yhq-content" >
				<view class="show-img-box">
					<img src ="/static/images/yhq.png" class="img" />
				</view>
				<view class="title">8折折扣券8折折扣券</view>
				<view class="sub-title">享受专属商户优惠</view>
				<view class="time">有效期：2025.4.20-2025.5.20</view>
				<view class="btn">领取</view>
			</view> -->
	</uni-popup>
		<view>
			<banner autoplay :info="banners" map="img" height="460" dot-mode="dot"></banner>
		</view>
		<view class="content-container">
			<template v-if="activityLists != false">
				<activity-list v-for="(item, index) in activityLists" :key="item.id" :info="item"></activity-list>
			</template>

			<view class="note-wrapper" v-if="note_list.data != false">
				<view class="title">精彩时刻</view>
				<uv-waterfall ref="waterfall"
					v-model="note_list.data"
					:column-count="2"
					:add-time="100"
					:left-gap="0"
					:right-gap="0"
					:column-gap="10"
					@changeList="changeNoteList">
					<template v-slot:list1>
						<view v-for="(item, index) in list1" :key="index">
							<note-item :info="item"></note-item>
						</view>
					</template>
					<template v-slot:list2>
						<view v-for="(item, index) in list2" :key="index">
							<note-item :info="item"></note-item>
						</view>
					</template>
				</uv-waterfall>
			</view>
			<uni-load-more v-if="note_list.data.length > 8" :status="loadStatus"></uni-load-more>
		</view>
		<empty-status v-if="activityLists == false && note_list.data == false" src="/static/images/activity-empty.png" 
		:note="'精彩活动准备中，\n敬请期待.....'"></empty-status>
		
	</view>
</template>

<script>
	import { useUserStore } from '../../store/userStore';
	export default {
		data() {
			return {
				banners: [],
				note_list: {
					data: [],
					page: 1,
					hasMore: false
				},
				list1: [],
				list2: [],
				activityLists: [],
				userStore: useUserStore(),
				loadPage: false,  //是否加载数据
				showed: false,
				loadStatus: 'more',
				showLoadMore: false,
				x: 0,
				y: 500,
				scale: 2,
				old: {
					x: 0,
					y: 0,
					scale: 2
				},
				rewardList: [],
				curr_reward:{},
				is_poped: false,
				is_geted: false,
				long_time:'2099-12-31 23:59:59',
			}
		},
		computed: {
		},
		onLoad(options) {
			this.y = uni.getWindowInfo().windowHeight - 100;
			const token = uni.getStorageSync('token')
			if (token) {
				this.userStore.userInfo = uni.getStorageSync('userInfo')
			}
			
			if (options._goto) {
				this.loadPage = false
				// 首页通过参数进入其它页面
				const { _goto, ...opt } = options
				this.$navTo(_goto, opt)
				return
			}
			this.loadPage = true;
			this.getRewardList();
			this.getActivityList();
			this.getBanner();
			this.getNoteList();
		},
		onShow() {
			this.is_poped = false;
			this.getRewardList();
			if (!this.showed) {
				this.showed = true
				return
			}
			if (!this.loadPage) {
				this.loadPage = true
				this.getActivityList();
				this.getBanner();
				this.getNoteList();
			}
		},
		onPullDownRefresh() {
			this.getActivityList()
			this.getBanner()
			this.getNoteList(true)
			this.getRewardList();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onShareAppMessage() {
			return {
			  title: '',
			  path: `/pages/index/index`,
			  imageUrl:''
			}
		},
		onShareTimeline() {
			return {
			  title: '',
			  query: '',
			  imageUrl: ''
			}
		},
		onReachBottom() {
			if (this.note_list.hasMore && this.note_list.page < 10) {
				this.loadStatus = 'loading'
				this.note_list.page += 1
				this.getNoteList()
			} else {
				this.loadStatus = 'noMore'
			}
		},
		methods: {
			// 获取待领取福利券列表
			async getRewardList() {
				//未登录 直接返回
				if (uni.getStorageSync('userInfo') =="") {
					return 
				}
				const res = await this.$request.get('/api/user/reward_lists',{
					status: 1,
					page: 1
				},{ load: false })
				if (res.code == 200) {
					const list = res.data?.lists || []
					this.rewardList = list
					if (this.rewardList.length >0 ) {
						if (this.is_poped == false) {
							//查找未弹出的
							for (var i = 0; i < this.rewardList.length; i++) {
								var obj = this.rewardList[i];
								if (obj.is_poped == 0) {
									this.curr_reward.index = i;
									this.curr_reward.type = obj.type;
									this.curr_reward.popup_img = obj.popup_img;
									this.curr_reward.reward_no = obj.reward_no;
									this.curr_reward.title = obj.title;
									this.curr_reward.is_poped = obj.is_poped;
									this.curr_reward.sub_title = obj.sub_title;
									this.curr_reward.start_time = obj.start_time;
									this.curr_reward.end_time = obj.end_time;
									//弹出
									this.open();
									this.is_poped = true;
									break;
								}
							}
							//没有弹窗，智能取第一个未领取
							if (this.is_poped == false) {
								var obj = this.rewardList[0];
								this.curr_reward.index = 0;
								this.curr_reward.type = obj.type;
								this.curr_reward.popup_img = obj.popup_img;
								this.curr_reward.reward_no = obj.reward_no;
								this.curr_reward.title = obj.title;
								this.curr_reward.is_poped = obj.is_poped;
								this.curr_reward.sub_title = obj.sub_title;
								this.curr_reward.start_time = obj.start_time;
								this.curr_reward.end_time = obj.end_time;
							}
						}else{
							var obj = this.rewardList[0];
							this.curr_reward.index = 0;
							this.curr_reward.type = obj.type;
							this.curr_reward.popup_img = obj.popup_img;
							this.curr_reward.reward_no = obj.reward_no;
							this.curr_reward.title = obj.title;
							this.curr_reward.is_poped = obj.is_poped;
							this.curr_reward.sub_title = obj.sub_title;
							this.curr_reward.start_time = obj.start_time;
							this.curr_reward.end_time = obj.end_time;
						}

					}else{
						this.curr_reward = {};
					}
				}
			},
			// 领取奖励
			async getReward(index, reward_no) {
				const res = await this.$request.post('/api/user/get_reward',{
					reward_no: reward_no,
				},{ load: false })
				if (res.code == 200) {
					//领取成功
					uni.showToast({
						title: '领取成功',
						icon: 'success'
					});
				}
				//刷新更新
				this.getRewardList();
				//关闭
				this.close();
			},
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			},
		   open(){
			    // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				// if (Object.keys(this.curr_reward).length == 0) {
				// 	var obj = this.rewardList[0];
				// 	this.curr_reward.index = 0;
				// 	this.curr_reward.type = obj.type;
				// 	this.curr_reward.popup_img = obj.popup_img;
				// 	this.curr_reward.reward_no = obj.reward_no;
				// 	this.curr_reward.title = obj.title;
				// 	this.curr_reward.sub_title = obj.sub_title;
				// 	this.curr_reward.start_time = obj.start_time;
				// 	this.curr_reward.end_time = obj.end_time;
				// }
			    this.$refs.popup.open('center');
			    uni.hideTabBar();
				//更新弹出券弹出状态位
				if (Object.keys(this.curr_reward).length > 0 && this.curr_reward.is_poped == 0) {
					this.$request.post('/api/user/set_reward_pop',{
						reward_no: this.curr_reward.reward_no,
					});
				}
		   },
		   close() {
		   	  this.$refs.popup.close();
			  uni.showTabBar();
		   	},
			changeNoteList(e) {
				this[e.name].push(e.value)
			},
 			async getActivityList() {
				const res = await this.$request.get('/api/activity/home_lists', {type: 0, page: 1})
				if (res.code == 200) {
					const list = res.data?.lists || []
					this.activityLists = list.filter(item => {
						return item.status < 4 || item.status > 6
					})
				}
			},
			async getBanner() {
				const res = await this.$request.get('/api/banner/lists')
				if (res.code == 200) {
					this.banners = res?.data || []
				}
			},
			async getNoteList(refresh = false) {
				if (refresh) {
					this.note_list.page = 1
				}
				const res = await this.$request.get('/api/note/home_lists', {page: this.note_list.page})
				if (res.code == 200) {
					this.note_list.hasMore = res.data.has_more_page
					const list = res.data?.lists || []
					if (refresh) {
						this.note_list.data = list
					} else {
						this.note_list.data = this.note_list.data.concat(list)
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8FAFD;
	}
</style>
<style scoped lang="scss">
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	.content-container {
		padding: 30rpx;
		position: relative;
		margin-top: -70rpx;
	}
	.note-wrapper {
		margin-top: 24rpx;
		
		.title {
			font-size: 32rpx;
			margin-bottom: 20rpx;
			font-weight: 500;
		}
	}
	.fix-box{
		position: fixed;
		left: 40rpx;
		bottom: 100rpx;
		background-color: #fff;
		width: 200rpx;
		height: 200rpx;
		border:1px solid red;
	}
  .movable-area {
    //  可移动的范围
    height: 100vh;
    width: 750rpx;
    top: 0vh;
    position: fixed;
    pointer-events: none; //鼠标事件可以渗透
	z-index: 10;
  }
  .movable-view {
    width: 140rpx; // 按钮大小
    height: 140rpx;
    pointer-events: auto; //恢复鼠标事件
  }
  .float-box {
    width: 200rpx;
    height: 200rpx;
    // line-height: 140rpx;
    // text-align: center;
    // background: #e0241b;
    // box-shadow: 0 3rpx 6rpx 1rpx rgba(224,36,27,.3);
    // border-radius: 50%;
    position: fixed;
	.float-box-img{
		width:100px;
		height: 100px;
	}
  }
  
  .popup-discount-content{
	  position: relative;
	  width: 316px;
	  height: 424px;
	  background-color: #F8FAFD;
	  background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/x5j_file/2025-04-14/174462557467fcdfa6bfa45.png);
	  background-size: 100% 100%; 
	  border-radius: 15px;
	  overflow:hidden;
	  .show-img-box{
		  display: block;
		  width: 272px;
		  height: 218px;
		  margin: auto;
		  margin-top:55px;
		  background: #FFFFFF;
		  border-radius: 12px 12px 12px 12px;
		  .img {
			  width: 272px;
			  height: 218px;
			  border-radius: 12px 12px 12px 12px;
		  }
	  }
	  .title{
		 width: 260px;
		 height: 25px;
		 margin: auto;
		 margin-top:30px;
		 font-family: PingFangSC, PingFang SC;
		 font-weight: 500;
		 font-size: 20px;
		 color: #262626;
		 line-height: 23px;
		 text-align: center;
		 font-style: normal;
		 text-transform: none 
	  }
	  .sub-title{
	  		width: 160px;
	  		height: 25px;
			margin: auto;
	  		font-family: PingFangSC, PingFang SC;
	  		font-weight: 500;
	  		font-size: 20px;
	  		color: #262626;
	  		line-height: 23px;
	  		text-align: center;
	  		font-style: normal;
	  		text-transform: none;  
	  }
	  .btn {
		  width: 230px;
		  height: 38px;
		  margin: auto;
	      margin-top:30rpx;
		  background: #00CAC0;
		  border-radius: 20px 20px 20px 20px;
		  font-weight: 500;
		  font-size: 16px;
		  color: #FFFFFF;
		  line-height: 38px;
		  text-align: center;
		  font-style: normal;
		  text-transform: none;
	  }

  }
  .close-box{
  		  width: 36px;
  		  height: 36px;
		  margin: auto;
  		  margin-top:50px;
  		  background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/x5j_file/2025-04-14/174462562567fcdfd9ee839.png);
  		  background-size: 100% 100%; 
  }
  
  
  .popup-yhq-content{
	  height: 467px;
  	  background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/x5j_file/2025-04-16/174479499667ff7574e5ab4.png);
  	  background-size: 100% 100%; 
	   .btn {
		  margin-top:20rpx; 
	   }
	   .title{
		   margin-top:40rpx;
	   }
	   
	   .sub-title{
	   	  line-height: 60rpx;
		  margin-bottom:30rpx; 
	   }
	   
	   .time {
	   	  width: 100%;
	   	  height: 30rpx;
	   	  margin: auto;
	   	  font-weight: 400;
	   	  font-size: 12px;
	   	  color: #7B7B7B;
	   	  line-height: 30rpx;
	   	  text-align: center;
	   	  font-style: normal;
	   	  text-transform: none;
	   }
  }
  

  

</style>
